<template>
  <section class="firmcontainer">
    <scroller :on-refresh="refresh" :on-infinite="infinite" style="padding-top: .79rem;background-color: #f8f8f8;">
      <!-- custom refresh spinner, use default `spinner` & viewBox 0,0,64,64 class -->
      <svg class="spinner" style="stroke: #03A9F4;" slot="refresh-spinner" viewBox="0 0 64 64">
        <g stroke-width="7" stroke-linecap="round">
          <line x1="10" x2="10" y1="27.3836" y2="36.4931">
            <animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate>
            <animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate>
            <animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite"></animate>
          </line>
          <line x1="24" x2="24" y1="18.6164" y2="45.3836">
            <animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite"></animate>
            <animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite"></animate>
            <animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite"></animate>
          </line>
          <line x1="38" x2="38" y1="16.1233" y2="47.8767">
            <animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite"></animate>
            <animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite"></animate>
            <animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite"></animate>
          </line>
          <line x1="52" x2="52" y1="16" y2="48">
            <animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite"></animate>
            <animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite"></animate>
            <animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite"></animate>
          </line>
        </g>
      </svg>
      <ul>
        <li class="li-list-item" v-for="(item,index) in items">
          <div class="common__course-cover-wrap">
            <img src="" class="common__course-cover">
          </div>
          <h4 class="common__course-title">特朗普五连“推”怒怼哈雷公司：以后卖回美国需</h4>
        </li>
      </ul>
      <!-- custom infinite spinner -->
      <svg class="spinner" style="fill: #ec4949;" slot="infinite-spinner" viewBox="0 0 64 64">
        <g>
          <circle cx="16" cy="32" stroke-width="0" r="3">
            <animate attributeName="fill-opacity" dur="750ms" values=".5;.6;.8;1;.8;.6;.5;.5" repeatCount="indefinite"></animate>
            <animate attributeName="r" dur="750ms" values="3;3;4;5;6;5;4;3" repeatCount="indefinite"></animate>
          </circle>
          <circle cx="32" cy="32" stroke-width="0" r="3.09351">
            <animate attributeName="fill-opacity" dur="750ms" values=".5;.5;.6;.8;1;.8;.6;.5" repeatCount="indefinite"></animate>
            <animate attributeName="r" dur="750ms" values="4;3;3;4;5;6;5;4" repeatCount="indefinite"></animate>
          </circle>
          <circle cx="48" cy="32" stroke-width="0" r="4.09351">
            <animate attributeName="fill-opacity" dur="750ms" values=".6;.5;.5;.6;.8;1;.8;.6" repeatCount="indefinite"></animate>
            <animate attributeName="r" dur="750ms" values="5;4;3;3;4;5;6;5" repeatCount="indefinite"></animate>
          </circle>
        </g>
      </svg>
    </scroller>

  </section>
</template>
<script>
  import AppVue from '../../../assets/eventBus.js';
  export default {
    props:{
      pageData:{
        type:Object
      }
    },
    data () {
      return {
        items:[],
        startX : 0 ,
        endX : 0 ,
        removeindex:'',
      }
    },
    created: function () {
      this.axios.get('/api/seller')
        .then((response) =>  {
          let list = response.data.data.myTake.myTakeList;
          for(var i = 0 ; i < list.length; i++)
          {
            this.items.push(list[i]);
          }
          console.log(this.items)
        })
        .catch((response) => {
          console.log(response);
        });
      this.top = 1;
      this.bottom = 20;

      AppVue.$on('menu', () => {
        this.$refs.mask.closemenu();
      });
    },
    methods: {
      closemenu:function () {
        this.$refs.mask.closemenu();
      },
      gitimage:function () {
        this.$refs.bottomMask.closemenu();
        this.restSlide();
      },
      todetails:function () {
        this.menu = false;
        this.$parent.getData();
      },
      refresh: function (done) {
        //下拉触发
        var self = this
        setTimeout(function () {
          var start = self.top - 1
          self.gitexamineList('refresh');
          self.top = self.top - 10;
          done();
        }, 1500)
      },

      infinite: function (done) {
        //上拉触发
        /*
         //没有更多数据
         if (this.bottom >= 30) {
         setTimeout(() => {
         done(true)
         }, 1500)
         return;
         }*/



        var self = this
        setTimeout(function () {
          var start = self.bottom + 1;
          self.gitexamineList('infinite');
          self.bottom = self.bottom + 10;
          done();
        }, 1500)
      },
      gitexamineList:function (type) {
        this.axios.get('/api/seller')
          .then((response) =>  {
            let list = response.data.data.myTake.myTakeList,
              arr = [];
            for(var i = 0 ; i < list.length; i++)
            {
              if(type == "infinite")
              {
                this.items.push(list[i]);
              }else if(type == "refresh")
              {
                arr.push(list[i]);
                this.items = arr;
              }
            }
            console.log(this.items)
          })
          .catch((response) => {
            console.log(response);
          });
        this.top = 1;
        this.bottom = 20;
      }
    }
  };
</script>
<style scoped>
  .firmcontainer{
    padding-bottom: 0;
    display: block;
    width: 100%;
  }
  .firmcontainer ul{
    width: 100%;
    display: block;
    padding: 0.3448275862068966rem 0.1724137931034483rem 0 0.1724137931034483rem;
  }
  .firmcontainer ul li{
    display: block;
    width: 100%;
    -webkit-box-shadow: 0rem 0.125rem 0.25rem rgba(7, 17, 27, 0.1);
    box-shadow: 0rem 0.125rem 0.25rem rgba(7, 17, 27, 0.1);
    border-radius: 0.05172413793103448rem;
    margin-bottom: 0.1724137931034483rem;
    position: relative;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    padding: 0.13793103448275862rem;
    background: #fff;
  }
  .common__course-cover-wrap{
    overflow: hidden;
    position: relative;
    border-radius: 0.06896551724137931rem;
    padding-top: 56%;
    width: 100%;
  }
  .common__course-cover{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0.06896551724137931rem;
    width: 100%;
    height: 100%;
  }
  .common__course-title{
    position: relative;
    margin-top: 0.15517241379310345rem;
    padding: 0 0.06896551724137931rem;
    font-size: 0.20689655172413793rem;
    line-height: 0.6206896551724138rem;
    color: #101010;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
